<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>接待规则</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/cusmanage/css/formSelects-v4.css">
    <link rel="stylesheet" href="/fission/css/iconfont.css">
	<link rel="stylesheet" href="/fission/css/common.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		.public_form_content{
			padding: 24px 40px 24px 0;
			background: #fff;
			border: 1px solid #e9e9e9;
			margin-bottom: 8px;
			margin-top: 8px;
		}
		.public_form_List{
			margin-bottom: 10px;
		}
		.public_form_List:last-child{
			margin-bottom: 0px;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			fill: #999;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		} 
		/*公共表单部分*/
		.public_form_container{
			padding: 20px 20px 40px 20px;
		}
		.yangshi{
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<form class="layui-form" action="" id="form1">
		<div class="public_container">
			<div class="public_form_container">
				<div class="public_content">
					<div class="public_title_container">
						<p>对话规则设置:客服账号一个规则针对于一个客服账号</p>
					</div>
				</div>
				<!-- 时段list -->
				<div class="public_form_content">
					{if count($set_list) >= 1}
					<div class="part-time-list">
					{loop $set_list as $key=>$value}
						<!-- 必须 至少有一个 part-time-item，用作添加时的模板。编辑的时候有则带数据循环渲染出来，无则 和首次创建一样渲染个空的 -->
						<div class="public_form_List part-time-item" style="position: relative;">
							<div class="public_formTitle_container">
								<lable class="layui-form-label part-time-item-index">对话规则{$key+1}：</lable>
							</div>
							<!-- 删除按钮 -->
							<div class="part-time-item-del" style="position: absolute;z-index: 9;right: -37px;bottom: 0;">
								<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
									<i class="layui-icon">&#xe640;</i>
								</button>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block" style="padding:10px 20px;background:#fdfdfd;border:1px solid #e5e5e5;">
									<div class="public_formTitle_container">
										<lable class="layui-form-label" style="text-align: left;padding-left: 0;">工作周期：</lable>
									</div>
									<div class="layui-input-inline" style="width: 490px;margin-bottom: 5px;">
										<select lay-verify="required" class="part-time-form-elem" name="part_time_day{$key+1}" xm-select="part_time_day{$key+1}" xm-select-skin="default">
											<option value="1" {if $value->one == 1}selected{/if}>周一</option>
											<option value="2" {if $value->two == 1}selected{/if}>周二</option>
											<option value="3" {if $value->three == 1}selected{/if}>周三</option>
											<option value="4" {if $value->four == 1}selected{/if}>周四</option>
											<option value="5" {if $value->five == 1}selected{/if}>周五</option>
											<option value="6" {if $value->six == 1}selected{/if}>周六</option>
											<option value="7" {if $value->seven == 1}selected{/if}>周日</option>
										</select>
									</div>
									<div class="yangshi">
										<div class="public_formTitle_container">
											<lable class="layui-form-label" style="text-align: left;padding-left: 0;">上班时间：</lable>
										</div>
										<div class="layui-input-inline" style="margin-bottom: 5px;">
											<input type="text" class="layui-input part-time-form-elem part-time-moment" name="part_time_moment{$key+1}" id="part_time_moment{$key+1}" lay-verify="required" value="{$value->khour}:{$value->kminute} ~ {$value->jhour}:{$value->jminute}" placeholder="开始时间 ~ 结束时间" style="text-align: center;padding-left: 0;">
										</div>
									</div>
									<div class="yangshi">
										<div class="public_formTitle_container">
											<lable class="layui-form-label" style="text-align: left;padding-left: 0;">客服账号：</lable>
										</div>
										<div class="layui-input-inline" style="margin-left: 0;">
											<span class="layui-btn layui-btn-primary addPeople" onclick="adduser(this)" data-size="{$key+1}">+ 前往添加</span><span class="layui-word-aux">需要先选择客服账号才可以选择接待员工</span>
											<input type="hidden" name="users{$key+1}" value="{$value->open_kfid}" id="users{$key+1}" class="addPeople" lay-verify="required"/>
											<div id="user_data{$key+1}" class="addPeople">
												<div class="service-card">
										        	<i class="iconfont icon-person"></i>{$this->get_user_name($value->open_kfid)}
										        </div>
											</div>
										</div>
									</div>
									<div class="yangshi">
										<div class="public_formTitle_container">
											<lable class="layui-form-label" style="text-align: left;padding-left: 0;">接待员工：</lable>
										</div>
										<div class="layui-input-inline" style="margin-left: 0;">
											<span class="layui-btn layui-btn-primary addPeople" onclick="addPeople(this)" data-size="{$key+1}">+ 前往添加</span>
											<input type="hidden" name="checkUser{$key+1}" value="{implode(',',json_decode($value->users,1))}" id="checkUser{$key+1}" class="addPeople" lay-verify="required"/>
											<div id="checkUserCon{$key+1}" class="addPeople">
												{loop json_decode($value->users,1) as $userid}
										        	<div class="service-card">
											        	<i class="iconfont icon-person"></i>{$this->get_user_names($userid)}
											        </div>
							      				{/loop}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						{/loop}
					</div>
					<input type="hidden" id="partTimeCount" name="part_time_count" value="{count($set_list)}" />
					{else}
					<div class="part-time-list">
						<!-- 必须 至少有一个 part-time-item，用作添加时的模板。编辑的时候有则带数据循环渲染出来，无则 和首次创建一样渲染个空的 -->
						<div class="public_form_List part-time-item" style="position: relative;">
							<div class="public_formTitle_container">
								<lable class="layui-form-label part-time-item-index">对话规则1：</lable>
							</div>
							<!-- 删除按钮 -->
							<div class="part-time-item-del" style="position: absolute;z-index: 9;right: -37px;bottom: 0;">
								<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
									<i class="layui-icon">&#xe640;</i>
								</button>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block" style="padding:10px 20px;background:#fdfdfd;border:1px solid #e5e5e5;">
									<div class="public_formTitle_container">
										<lable class="layui-form-label" style="text-align: left;padding-left: 0;">工作周期：</lable>
									</div>
									<div class="layui-input-inline" style="width: 490px;margin-bottom: 5px;">
										<select lay-verify="required" class="part-time-form-elem" name="part_time_day1" xm-select="part_time_day1" xm-select-skin="default">
											<option value="1" selected>周一</option>
											<option value="2" selected>周二</option>
											<option value="3" selected>周三</option>
											<option value="4" selected>周四</option>
											<option value="5" selected>周五</option>
											<option value="6" selected>周六</option>
											<option value="7" selected>周日</option>
										</select>
									</div>
									<div class="yangshi">
									<div class="public_formTitle_container">
										<lable class="layui-form-label" style="text-align: left;padding-left: 0;">上班时间：</lable>
									</div>
									<div class="layui-input-inline" style="margin-bottom: 5px;">
										<input type="text" class="layui-input part-time-form-elem part-time-moment" name="part_time_moment1" id="part_time_moment1" lay-verify="required" placeholder="开始时间 ~ 结束时间" style="text-align: center;padding-left: 0;">
									</div>
									</div>

									<div class="yangshi">
										<div class="public_formTitle_container">
											<lable class="layui-form-label" style="text-align: left;padding-left: 0;">客服账号：</lable>
										</div>
										<div class="layui-input-inline" style="margin-left: 0;">
											<span class="layui-btn layui-btn-primary addPeople" onclick="adduser(this)" data-size="1">+ 前往添加</span><span class="layui-word-aux">需要先选择客服账号才可以选择接待员工</span>
											<input type="hidden" name="users1" value="" id="users1" class="addPeople" lay-verify="required"/>
											<div id="user_data1" class="addPeople">
		
											</div>
										</div>
									</div>
									<div class="yangshi">
										<div class="public_formTitle_container">
											<lable class="layui-form-label" style="text-align: left;padding-left: 0;">接待员工：</lable>
										</div>
										<div class="layui-input-inline" style="margin-left: 0;">
											<span class="layui-btn layui-btn-primary addPeople" onclick="addPeople(this)" data-size="1">+ 前往添加</span>
											<input type="hidden" name="checkUser1" id="checkUser1" class="addPeople" lay-verify="required"/>
											<div id="checkUserCon1" class="addPeople">

											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<input type="hidden" id="partTimeCount" name="part_time_count" value="1" />
					{/if}
					<button type="button" class="layui-btn layui-btn-primary part-time-btn-add"style="color: #1E9FFF;margin-left: 92px;border: 0;background: transparent;"><i class="layui-icon">&#xe608;</i> 添加对话规则
					</button>
				</div>
				<div class="public_form_content">
					<div class="public_form_List">
					  	<div class="layui-form-item">
					    <label class="layui-form-label" style="width: 100px;">备用员工：</label>
					    	<div class="layui-input-block">
					      		<span class="layui-btn layui-btn-primary" onclick="addPeoples()">+ 前往添加</span>
								<input type="hidden" name="checkUser" value="{implode(',',json_decode($set->bz_users,1))}" id="checkUser" lay-verify="required" />
								<div id="checkUserCon"  style="padding: 6px 5px 0px 15px;">
									{loop json_decode($set->bz_users,1) as $userid}
							        	<div class="service-card">
								        	<i class="iconfont icon-person"></i>{$this->get_user_names($userid)}
								        </div>
				      				{/loop}
								</div>
					    	</div>
					  	</div>
					</div>
				</div>
				<div class="public_form_content">
					<div class="public_form_List">
					  	<div class="layui-form-item">
					    <label class="layui-form-label" style="width: 100px;">分配规则：</label>
					    	<div class="layui-input-block">
					      		<input type="radio" name="set_line" value="1" lay-filter="set_line" title="轮流分配" {if $set_line->set_line != 2} checked {/if}>
					      		<input type="radio" name="set_line" value="2" lay-filter="set_line" title="空闲分配" {if $set_line->set_line == 2} checked {/if}>
					    	</div>
					    	<div class="layui-form-mid layui-word-aux" id="set_line_one">新咨询消息轮流分配给所有接待人员</div>
					    	<div class="layui-form-mid layui-word-aux" id="set_line_two" style="display: none;">新咨询消息分配空闲接待人员</div>
					  	</div>
					</div>
					<div class="public_form_List">
					  	<div class="layui-form-item">
					    <label class="layui-form-label" style="width: 100px;">优先分配：</label>
					    	<div class="layui-input-block">
					      		<input type="radio" name="precedence" value="1" lay-filter="precedence" title="开启" {if $set_line->precedence == 1} checked {/if}>
					      		<input type="radio" name="precedence" value="0" lay-filter="precedence" title="关闭" {if $set_line->precedence != 1} checked {/if}>
					    	</div>
					    	<div class="layui-form-mid layui-word-aux">开启后，将优先分配给上次接待人员继续服务</div>
					  	</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					</div>
				</div>
			</div>	
		</div>	
	</form>
</body>
<script src="/cdn/jquery.min.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/js/ajax.js"></script>
<script src="/cusmanage/js/formSelects-v4.min.js"></script>
<script type="text/javascript">
	// 添加时间段
	function addOnePartTime() {
		var $items = $('.part-time-list .part-time-item')
		var length = $items.length
		if (!length) {
			return console.error('至少要有一个 .part-time-item 用作模板')
		}
		var tpl = $items.eq(0).clone(false)
		setPartTimeItemId(tpl, length + 1, true)
		$(".part-time-list").append(tpl)
		layui.formSelects.render('part_time_day' + (length + 1));
		layui.form.render()
		setCount(length + 1)
		initTimeSelects();
	}
	function setPartTimeItemId($item, index, clear) {
		$item.find('.part-time-item-index').text('对话规则' + index + '：')
		$item.find('.addPeople').attr('data-size' ,index)
		var $inputs = $item.find('.part-time-form-elem')
		for (var i = 0, l = $inputs.length; i < l; i++) {
			var $theInput = $($inputs[i])
			if (clear && $theInput.attr('type') !== 'radio') {
				$theInput.val('')
			}
			setElemAttr($theInput, index)
		}
		var $sImgBtns = $item.find('.addPeople')
		for (var i = 0, l = $sImgBtns.length; i < l; i++) {
			setElemAttr($($sImgBtns[i]), index)
		}
		return $item
	}
	function setElemAttr($elem, index) {
		var id = $elem.attr('id'), name = $elem.attr('name'), _name = $elem.attr('_name'), dataTarget = $elem.attr('data-target'), layKey = $elem.attr('lay-key'), xmSelect = $elem.attr('xm-select');
		var reg = /([0-9]+)/g
		$elem.attr({
			id: id && (id.replace(reg, '') + index),
			name: name && (name.replace(reg, '') + index),
			'data-target': dataTarget && (dataTarget.replace(reg, '') + index), // 上传图片按钮
			'_name': _name && (_name.replace(reg, '') + index), // 日期多选
			'xm-select': xmSelect && (xmSelect.replace(reg, '') + index), // 日期多选
			'lay-key': layKey ? (String(index) + Date.now()) : layKey, // 时间选择器
		});
	}
	// 添加时间段按钮
	$('.part-time-btn-add').on('click', addOnePartTime)
	// 删除时间段
	$('.part-time-list').on('click', '.part-time-item-del', function() {
		if ($('.part-time-list .part-time-item').length <= 1) {
			tusi('不能再少了')
		} else {
			$(this).parent().remove()
			updateItemsOrder()
		}
	})
	function updateItemsOrder() {
		var $items = $('.part-time-list .part-time-item')
		var l = $items.length
		setCount(l)
		for (var i = 0; i < l; i++) {
			var $theItem = $($items[i])
			setPartTimeItemId($theItem, i + 1, false)
			// 更新多选框
			var theMultiSelectsVal = $theItem.find('.xm-hide-input').val()
			layui.formSelects.render('part_time_day' + (i + 1),
				theMultiSelectsVal ? { init: theMultiSelectsVal.split(',') } : undefined
			);
		}
		layui.form.render()
		initTimeSelects()
	}
	// 初始化、重新渲染 事件选择器
	function initTimeSelects() {
		lay('.part-time-list .part-time-moment').each(function() {
			layui.laydate.render({
				elem: this
				,type: 'time'
				,range: '~'
				,format: 'HH:mm'
			})
		})
	}
	function setCount(n) {
		if (n === undefined) {
			n = $('.part-time-list .part-time-item').length
		}
		$('#partTimeCount').val(n)
	}

	layui.use('laydate', initTimeSelects)
</script>
<script type="text/javascript">
	layui.use('form', function(){
	  	var form = layui.form;
	  	form.on('radio(set_line)', function (data) {
	        if ($('input[name="set_line"]:checked').val() == "1"){
	            $("#set_line_one").show();
	            $("#set_line_two").hide();
	        }else{
	        	$("#set_line_two").show();
	        	$("#set_line_one").hide();
	        }
	        form.render();
	    });
	  	//监听提交
  		form.on('submit(formDemo)', function(data){
			var formData = $('#form1').serialize();	
			myAjaxPost(false, true, '', formData, function (resp) {
				tusi(resp.msg);
			});
			return false;
	  	});
	});

	function addPeople(th){
		var size = $(th).data("size");
		var users = $("#users"+size).val();
		if(!users){
			tusi("请先选择客服账号");return false;
		}
		layer.open({
		  type: 2,
		  title: '请选择使用人员',
		  shadeClose: true,
		  shade: 0.2,
		  area: ['700px', '530px'],
		  content: 'select_user.html?size='+size+"&users="+users
		}); 
	}
	function addPeoples(){
		layer.open({
		  type: 2,
		  title: '请选择使用人员',
		  shadeClose: true,
		  shade: 0.2,
		  area: ['700px', '530px'],
		  content: 'select_user.html'
		}); 
	}
	function adduser(th){
		var size = $(th).data("size");
		parent.$("#checkUserCon"+size).empty();
        parent.$("#checkUserCon"+size).html();
        parent.$("#checkUser"+size).val();
		layer.open({
		  type: 2,
		  title: '请选择使用人员',
		  shadeClose: true,
		  shade: 0.2,
		  area: ['700px', '530px'],
		  content: 'select_kf-'+size+'-4.html'
		}); 
	}
</script>
</html>